import React, { Component } from "react";

import "../../styles/mine.scss";

import { good_favlist } from "../../api/index";
import { Avatar, Space, TabBar } from "antd-mobile";
import {
  HandPayCircleOutline,
  MailOpenOutline,
  FaceRecognitionOutline,
  FileWrongOutline,
} from "antd-mobile-icons";

class Mine extends Component {
  constructor(props) {
    super(props);
    this.state = {
      pic: localStorage.getItem("pic"),
      phone: localStorage.getItem("phone"),
      userid: localStorage.getItem("userid"),
      tabs: [
        {
          key: "/daifu",
          title: "代付款",
          icon: <HandPayCircleOutline />,
        },
        {
          key: "/daifa",
          title: "代发货",
          icon: <MailOpenOutline />,
        },
        {
          key: "/yifa",
          title: "已发货",
          icon: <FaceRecognitionOutline />,
        },
        {
          key: "/daiping",
          title: "待评价",
          icon: <FileWrongOutline />,
        },
      ],
      collectnum: [],
    };
  }
  tuichu() {
    // 删除掉token等操作
    this.props.history.push("/login");
  }
  async componentDidMount() {
    var res = await good_favlist({ userid: this.state.userid });
    console.log("收藏的商品", res);
    this.setState({
      collectnum: res.data.list,
    });
  }
  gocollact() {
    // 跳转到收藏页
    this.props.history.push("/collect");
  }
  gokefu() {
    this.props.history.push("/kefu");
  }
  render() {
    console.log(this.state.pic);

    return (
      <div className="mine-box">
        <div className="mine-head">
          <Space>
            <Avatar src={this.state.pic} alt="" />
          </Space>
          <div className="mine-head-name">{this.state.phone}</div>
        </div>
        <div className="mine-box-collect">
          <div
            className="mine-collect"
            onClick={() => {
              this.gocollact();
            }}
          >
            <div className="mine-collect-num">
              {this.state.collectnum.length}
            </div>
            收藏
          </div>
          <div className="mine-jifen">积分</div>
          <div className="mine-youhui">优惠券</div>
        </div>
        <div className="mine-dingdan">
          <div className="mine-dingdan-text">
            <div className="mine-dingdan-word">我的订单</div>
            <div className="mine-dingdan-look">
              查看全部订单 <span>&gt;</span>{" "}
            </div>
          </div>
          <div className="mine-dingdan-icon">
            <TabBar defaultActiveKey="4">
              {this.state.tabs.map((item) => (
                <TabBar.Item
                  key={item.key}
                  icon={item.icon}
                  title={item.title}
                />
              ))}
            </TabBar>
          </div>
        </div>
        <div className="mine-huiyuan">
          <span className="mine-huiyuan-word"> 会员中心</span>
          <span className="mine-huiyuan-da">&gt;</span>
        </div>
        <div className="mine-fuwu">
          <div className="mine-fuwu-zong">
            <span className="mine-fuwu-word">领劵中心</span>
            <span className="mine-fuwu-da">&gt;</span>
          </div>
          <div className="mine-fuwu-zong">
            <span className="mine-fuwu-word">我的评价</span>
            <span className="mine-fuwu-da">&gt;</span>
          </div>
          <div className="mine-fuwu-zong">
            <span className="mine-fuwu-word">收货地址</span>
            <span className="mine-fuwu-da">&gt;</span>
          </div>
          <div
            className="mine-fuwu-zong"
            onClick={() => {
              this.gokefu();
            }}
          >
            <span className="mine-fuwu-word">我的客服</span>
            <span className="mine-fuwu-da">&gt;</span>
          </div>
        </div>
        <div
          className="mine-tui"
          onClick={() => {
            this.tuichu();
          }}
        >
          退出登录
        </div>
      </div>
    );
  }
}

export default Mine;
